<template>
  <div class="app-container">
    <el-row class="sysImageZt">
      <el-col :span="3">
        <el-menu
            class="el-menu-vertical-demo"
            default-active="按钮">
          <el-submenu class="submenuClass" index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统图库</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="dict in dict.type.sys_image_type" :key="dict.value"
                            :index="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                            @click="handleClick(dict.value)">{{ dict.value }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="21">
          <el-card style="margin-left: 10px">
              <el-form v-if="isHide" v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams"
                       label-width="68px">
                  <el-form-item label="文件名称" prop="moduleName">
                      <el-input
                          v-model="queryParams.fileName"
                          clearable
                          placeholder="请输入文件名称"
                          size="small"
                          @keyup.enter.native="handleQuery"
                      />
                  </el-form-item>
                  <el-form-item>
                      <el-button v-hasPermi="['zutai:sysImageZt:list']" icon="el-icon-search" size="mini" type="primary"
                                 @click="handleQuery">搜索
                      </el-button>
                      <el-button v-hasPermi="['zutai:sysImageZt:list']" icon="el-icon-refresh" size="mini" @click="resetQuery">
                          重置
                      </el-button>
                  </el-form-item>
              </el-form>
          </el-card>
          <el-card style="margin: 10px">
              <el-row :gutter="10" class="mb8">
                    <el-col v-if="isHide" :span="1.5">
                        <el-upload
                            ref="upload"
                            :action="upload.uploadUrl"
                            :before-remove="beforeRemove"
                            :before-upload="beforeUpload"
                            :file-list="upload.imageList"
                            :headers="upload.headers"
                            :limit="500"
                            :on-exceed="handleExceed"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                            :show-file-list="false"
                            class="upload-demo"
                            multiple
                        >
                            <el-button v-hasPermi="['zutai:sysImageZt:upload']" size="mini" type="primary" @click="uploadFile"><i
                                class="el-icon-upload el-icon--right"/>上传
                            </el-button>
                        </el-upload>
                    </el-col>
                    <el-col v-if="isHide" :span="1.5">
                        <el-button
                            v-hasPermi="['zutai:sysImageZt:delete']"
                            :disabled="multiple"
                            icon="el-icon-delete"
                            size="mini"
                            type="danger"
                            @click="handleDelete"
                        >删除
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            v-hasPermi="['zutai:sysImageZt:update']"
                            :disabled="multiple"
                            icon="el-icon-edit"
                            size="mini"
                            type="success"
                            @click="handleChoice"
                        >修改
                        </el-button>
                    </el-col>
                </el-row>
              <div style="margin-top: 10px">
                    <el-radio-group v-model="selectImageRadio" @change="radioChange">
                        <el-card v-for="item in uploadList" :key="item.id" :body-style="{ padding: '5px'}" :style="boxCard">
                            <img :src="baseApi+item.resourceUrl" class="cardImage">
                            <div style="padding: 5px;text-align:left;">
                                <span style="font-size:11px;">{{ item.fileName }}</span>
                                <el-radio :label="item.id" class="selectRadioText"><span v-show="false">占位符</span></el-radio>
                            </div>
                        </el-card>
                    </el-radio-group>
                </div>
              <Pagination
                  v-show="total>0"
                  :limit.sync="queryParams.pageSize"
                  :page-size="5"
                  :page-sizes="[18, 27, 54]"
                  :page.sync="queryParams.pageNum"
                  :total="total"
                  @pagination="getList"
              />
          </el-card>
      </el-col>
    </el-row>
    <el-dialog
        :visible.sync="dialogVisible"
        title="修改"
        width="25%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="组件类型">
          <el-select v-model="form.moduleName" filterable placeholder="请选择" style="width: 100%;">
            <el-option
                v-for="item in dict.type.sys_image_type"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组件名称">
          <el-input v-model="form.fileName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateHandleClick">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {listUpload, getUpload, delUpload, addUpload, updateUpload, exportUpload} from "@/views/zutai/api/zutai/upload";
import {getToken} from "@/utils/auth";
import {Message} from "element-ui";

export default {
  name: "Upload",
  dicts: ['sys_image_type'],
  props: {
    moduleName: String,
    message: String,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 上传信息表格数据
      uploadList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 27,
        deptIdStrs: null,
        moduleName: "",
        fileName: "",
        moduleGuid: "云组态",
        resourceUrl: null,
        orderByColumn: "id",
        isAsc: "desc"
      },
      upload: {
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        uploadUrl: "",
        imageList: [],
      },
      baseApi: process.env.VUE_APP_BASE_API,
      //baseApi:'http://106.14.5.188:17261/prod-api',
      imageUrl: '',
      selectionImage: {},
      isHide: true,
      isHideImage: true,

      //组态
      boxCard: {
        width: '150px',
        height: 'auto',
        marginRight: '5px',
        display: 'inline-block',
      },
      selectImageRadio: null,
      dialogVisible: false,
      form: {},
    }
  },
  created() {
    console.log(this.moduleName);
  },
  mounted() {
    if (this.message != undefined) {
      this.isHide = false;
      this.isHideImage = false;
      this.isHideImage = true;
    }
    this.queryParams.moduleName = '按钮'
    this.getList()
  },
  methods: {
    radioChange() {
      this.multiple = false;
    },
    handleClick(label) {
      this.queryParams.moduleName = label;
      this.multiple = true;
      this.getList();
    },
    handleChoice() {
      //this.$message('选择图标'+this.selectImageRadio);
      //this.$parent.$parent.handleChoice(this.selectionImage);
      this.dialogVisible = true;
    },
    updateHandleClick() {
      this.form.id = this.selectImageRadio;
      updateUpload(this.form).then(response => {
        Message.success("修改成功")
        this.dialogVisible = false;
        this.getList();
      });
    },
    /** 查询上传信息列表 */
    getList() {
      this.loading = true;
      listUpload(this.queryParams).then(response => {
        this.uploadList = response.rows;
        this.total = response.total
        this.loading = false;
        this.selectImageRadio = null;

      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.fileName = "";
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete() {
      const ids = this.selectImageRadio
      this.$confirm('是否确认删除此图标组件么？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delUpload(ids);
      }).then(() => {
        this.getList();
        Message.success("删除成功")
      })
    },
    uploadFile() {
      this.upload.uploadUrl = process.env.VUE_APP_BASE_API + "/zutai/upload/uploadData" + "?isMultiple=true&moduleGuid=云组态&moduleName=" + this.queryParams.moduleName;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(files)
      console.log(fileList)
    },
    beforeUpload(file) {
      console.log("上传前")
      if (this.queryParams.moduleName == '') {
        this.$message({
          message: '请选择左侧上传的类型',
          type: 'warning'
        });
        this.$refs.upload.abort();
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20MB!');
      }
      return isLt2M;
    },
    beforeRemove(file, fileList) {

    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        Message.success("上传成功")
        this.getList();
        this.$refs.upload.clearFiles()
      } else {
        this.msgSuccess(res.msg);
      }
    },
  }
};
</script>
<style scoped>
/* .app-container .el-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
} */
.sysImageZt {
  margin: 20px;
}

.image {
  width: 100px;
  height: 100px;
}

.selectRadioText {
  color: #ffff;
  padding: 5px;
  float: right;
}

.submenuClass {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
}

.cardImage {
  width: 100px;
  height: 100px;
}

::-webkit-scrollbar-thumb {
  background-color: #ddd;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  position: absolute;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}
</style>>
